<template>
    <div class="page">
        <div class="title">
            <el-icon size="36px" @click="back">
                <ArrowLeft />
            </el-icon>
            <h1>设置项</h1>
        </div>

        <el-table :data="data" :border="true">
            <el-table-column prop="id" label="Id"></el-table-column>
            <el-table-column prop="name" label="配置名称"></el-table-column>
            <el-table-column prop="value" label="配置值"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="description" label="操作">
                <template #default="{ row }">
                    <el-button type="primary" @click="edit(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑 -->
        <el-dialog title="编辑" v-model="editVisible">
            <el-form :model="form">
                <el-form-item label="配置名称" label-width="100px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="配置值" label-width="100px">
                    <!-- <el-input v-model="form.value" autocomplete="off"></el-input> -->
                    <el-select v-model="form.value">
                        <el-option label="5分钟" value="5"></el-option>
                        <el-option label="10分钟" value="10"></el-option>
                        <el-option label="30分钟" value="30"></el-option>
                        <el-option label="60分钟" value="60"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" label-width="100px">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submit">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import axios from "axios";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();

const data = ref([]);
const back = () => {
    router.go(-1)
}
const getData = () => {
    axios.get("http://127.0.0.1:3000/setting").then((res) => {
        console.log("res", res);
        if (res.data.code == 200) {
            data.value = res.data.data;
        }
    });
};

const form = reactive({
    id: "",
    name: "",
    value: "",
    description: ""
})

const editVisible = ref(false);

const submit = async () => {
    let res = await axios.request({
        url: "http://127.0.0.1:3000/setting/" + form.id,
        data: form,
        method: "patch",
    })
    if (res.data.code == 200) {
        ElMessage.success("修改成功");
        editVisible.value = false;
        getData()
    }
}

const edit = row => {
    form.id = row.id;
    form.name = row.name;
    form.value = row.value;
    form.description = row.description;

    editVisible.value = true;
}

getData();
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 12px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: left;

        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 12px;
    }
}
</style>
